<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../static/ztree/css/zTreeStyle.css" type="text/css">
    <style>
        body {
            background-color: white;
            margin: 0;
            padding: 0;
            text-align: left;
        }

        div,
        p,
        table,
        th,
        td {
            list-style: none;
            margin: 0;
            padding: 0;
            color: #333;
            font-size: 12px;
            font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
        }

        #testIframe {
            margin-left: 10px;
        }
    </style>
    <script type="text/javascript" src="../static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../static/ztree/js/jquery.ztree.core.js" charset="utf-8"></script>
    <script type="text/javascript" src="../static/ztree/js/jquery.ztree.excheck.js" charset="utf-8"></script>
    <SCRIPT type="text/javascript">
        <!--
        var zTree;
        var demoIframe;

        var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false,
                nameIsHTML: true
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            },
            callback: {
                beforeClick: function(treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("tree");
                    if(treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                        demoIframe.attr("src", treeNode.file + ".html");
                        return true;
                    }
                }
            }
        };

        var zNodes = [{
            id: 1,
            pId: 0,
            name: "[core] 基本功能 演示",
            open: true
        }, {
            id: 101,
            pId: 1,
            name: "最简单的树 --  标准 JSON 数据",
            file: "core/standardData"
        }, {
            id: 102,
            pId: 1,
            name: "最简单的树 --  简单 JSON 数据",
            file: "core/simpleData"
        }, {
            id: 103,
            pId: 1,
            name: "不显示 连接线",
            file: "core/noline"
        }, {
            id: 104,
            pId: 1,
            name: "不显示 节点 图标",
            file: "core/noicon"
        }, {
            id: 105,
            pId: 1,
            name: "自定义图标 --  icon 属性",
            file: "core/custom_icon"
        }, {
            id: 106,
            pId: 1,
            name: "自定义图标 --  iconSkin 属性",
            file: "core/custom_iconSkin"
        }, {
            id: 107,
            pId: 1,
            name: "自定义字体",
            file: "core/custom_font"
        }, {
            id: 115,
            pId: 1,
            name: "超链接演示",
            file: "core/url"
        }, {
            id: 108,
            pId: 1,
            name: "异步加载 节点数据",
            file: "core/async"
        }, {
            id: 109,
            pId: 1,
            name: "用 zTree 方法 异步加载 节点数据",
            file: "core/async_fun"
        }, {
            id: 110,
            pId: 1,
            name: "用 zTree 方法 更新 节点数据",
            file: "core/update_fun"
        }, {
            id: 111,
            pId: 1,
            name: "单击 节点 控制",
            file: "core/click"
        }, {
            id: 112,
            pId: 1,
            name: "展开 / 折叠 父节点 控制",
            file: "core/expand"
        }, {
            id: 113,
            pId: 1,
            name: "根据 参数 查找 节点",
            file: "core/searchNodes"
        }, {
            id: 114,
            pId: 1,
            name: "其他 鼠标 事件监听",
            file: "core/otherMouse"
        },

            {
                id: 2,
                pId: 0,
                name: "[excheck] 复/单选框功能 演示",
                open: false
            }, {
                id: 201,
                pId: 2,
                name: "Checkbox 勾选操作",
                file: "excheck/checkbox"
            }, {
                id: 206,
                pId: 2,
                name: "Checkbox nocheck 演示",
                file: "excheck/checkbox_nocheck"
            }, {
                id: 207,
                pId: 206,
                name: "Checkbox chkDisabled 演示",
                file: "excheck/checkbox_chkDisabled"
            }, {
                id: 208,
                pId: 206,
                name: "Checkbox halfCheck 演示",
                file: "excheck/checkbox_halfCheck"
            }, {
                id: 202,
                pId: 207,
                name: "Checkbox 勾选统计",
                file: "excheck/checkbox_count"
            }, {
                id: 203,
                pId: 202,
                name: "用 zTree 方法 勾选 Checkbox",
                file: "excheck/checkbox_fun"
            }, {
                id: 204,
                pId: 203,
                name: "Radio 勾选操作",
                file: "excheck/radio"
            }, {
                id: 209,
                pId: 204,
                name: "Radio nocheck 演示",
                file: "excheck/radio_nocheck"
            }, {
                id: 210,
                pId: 2,
                name: "Radio chkDisabled 演示",
                file: "excheck/radio_chkDisabled"
            }, {
                id: 211,
                pId: 2,
                name: "Radio halfCheck 演示",
                file: "excheck/radio_halfCheck"
            }, {
                id: 205,
                pId: 2,
                name: "用 zTree 方法 勾选 Radio",
                file: "excheck/radio_fun"
            },

            {
                id: 3,
                pId: 0,
                name: "[exedit] 编辑功能 演示",
                open: false
            }, {
                id: 301,
                pId: 3,
                name: "拖拽 节点 基本控制",
                file: "exedit/drag"
            }, {
                id: 302,
                pId: 3,
                name: "拖拽 节点 高级控制",
                file: "exedit/drag_super"
            }, {
                id: 303,
                pId: 3,
                name: "用 zTree 方法 移动 / 复制 节点",
                file: "exedit/drag_fun"
            }, {
                id: 304,
                pId: 3,
                name: "基本 增 / 删 / 改 节点",
                file: "exedit/edit"
            }, {
                id: 305,
                pId: 3,
                name: "高级 增 / 删 / 改 节点",
                file: "exedit/edit_super"
            }, {
                id: 306,
                pId: 3,
                name: "用 zTree 方法 增 / 删 / 改 节点",
                file: "exedit/edit_fun"
            }, {
                id: 307,
                pId: 3,
                name: "异步加载 & 编辑功能 共存",
                file: "exedit/async_edit"
            }, {
                id: 308,
                pId: 3,
                name: "多棵树之间 的 数据交互",
                file: "exedit/multiTree"
            },

            {
                id: 4,
                pId: 0,
                name: "大数据量 演示",
                open: false
            }, {
                id: 401,
                pId: 4,
                name: "一次性加载大数据量",
                file: "bigdata/common"
            }, {
                id: 402,
                pId: 4,
                name: "分批异步加载大数据量",
                file: "bigdata/diy_async"
            }, {
                id: 403,
                pId: 4,
                name: "分批异步加载大数据量",
                file: "bigdata/page"
            },

            {
                id: 5,
                pId: 0,
                name: "组合功能 演示",
                open: false
            }, {
                id: 501,
                pId: 5,
                name: "冻结根节点",
                file: "super/oneroot"
            }, {
                id: 502,
                pId: 5,
                name: "单击展开/折叠节点",
                file: "super/oneclick"
            }, {
                id: 503,
                pId: 5,
                name: "保持展开单一路径",
                file: "super/singlepath"
            }, {
                id: 504,
                pId: 5,
                name: "添加 自定义控件",
                file: "super/diydom"
            }, {
                id: 505,
                pId: 5,
                name: "checkbox / radio 共存",
                file: "super/checkbox_radio"
            }, {
                id: 506,
                pId: 5,
                name: "左侧菜单",
                file: "super/left_menu"
            }, {
                id: 513,
                pId: 5,
                name: "OutLook 风格",
                file: "super/left_menuForOutLook"
            }, {
                id: 515,
                pId: 5,
                name: "Awesome 风格",
                file: "super/awesome"
            }, {
                id: 514,
                pId: 5,
                name: "Metro 风格",
                file: "super/metro"
            }, {
                id: 507,
                pId: 5,
                name: "下拉菜单",
                file: "super/select_menu"
            }, {
                id: 509,
                pId: 5,
                name: "带 checkbox 的多选下拉菜单",
                file: "super/select_menu_checkbox"
            }, {
                id: 510,
                pId: 5,
                name: "带 radio 的单选下拉菜单",
                file: "super/select_menu_radio"
            }, {
                id: 508,
                pId: 5,
                name: "右键菜单 的 实现",
                file: "super/rightClickMenu"
            }, {
                id: 511,
                pId: 5,
                name: "与其他 DOM 拖拽互动",
                file: "super/dragWithOther"
            }, {
                id: 512,
                pId: 5,
                name: "异步加载模式下全部展开",
                file: "super/asyncForAll"
            },

            {
                id: 6,
                pId: 0,
                name: "其他扩展功能 演示",
                open: false
            }, {
                id: 601,
                pId: 6,
                name: "隐藏普通节点",
                file: "exhide/common"
            }, {
                id: 602,
                pId: 6,
                name: "配合 checkbox 的隐藏",
                file: "exhide/checkbox"
            }, {
                id: 603,
                pId: 6,
                name: "配合 radio 的隐藏",
                file: "exhide/radio"
            }
        ];

        $(document).ready(function() {
            var t = $("#tree");
            t = $.fn.zTree.init(t, setting, zNodes);
            demoIframe = $("#testIframe");
            demoIframe.bind("load", loadReady);
            var zTree = $.fn.zTree.getZTreeObj("tree");
            zTree.selectNode(zTree.getNodeByParam("id", 101));

        });

        function loadReady() {
            var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
                htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
                maxH = Math.max(bodyH, htmlH),
                minH = Math.min(bodyH, htmlH),
                h = demoIframe.height() >= maxH ? minH : maxH;
            if(h < 530) h = 530;
            demoIframe.height(h);
        }
        /**
         * 展开树
         * @param treeId
         */
        function expand_ztree(treeId) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            treeObj.expandAll(true);
        }

        /**
         * 收起树：只展开根节点下的一级节点
         * @param treeId
         */
        function close_ztree(treeId) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            var nodes = treeObj.transformToArray(treeObj.getNodes());
            var nodeLength = nodes.length;
            for(var i = 0; i < nodeLength; i++) {
                if(nodes[i].id == '0') {
                    //根节点：展开
                    treeObj.expandNode(nodes[i], true, true, false);
                } else {
                    //非根节点：收起
                    treeObj.expandNode(nodes[i], false, true, false);
                }
            }
        }

        /**
         * 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】
         * @param treeId
         * @param searchConditionId 文本框的id
         */
        function search_ztree(treeId, searchConditionId) {
            searchByFlag_ztree(treeId, searchConditionId, "");
        }

        /**
         * 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】
         * @param treeId
         * @param searchConditionId     搜索条件Id
         * @param flag                  需要高亮显示的节点标识
         */
        function searchByFlag_ztree(treeId, searchConditionId, flag) {
            //<1>.搜索条件
            var searchCondition = $('#' + searchConditionId).val();
            //<2>.得到模糊匹配搜索条件的节点数组集合
            var highlightNodes = new Array();
            if(searchCondition != "") {
                var treeObj = $.fn.zTree.getZTreeObj(treeId);
                highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
            }
            //<3>.高亮显示并展示【指定节点s】
            highlightAndExpand_ztree(treeId, highlightNodes, searchCondition, flag);
        }

        /**
         * 高亮显示并展示【指定节点s】
         * @param treeId
         * @param highlightNodes 需要高亮显示的节点数组
         * @param flag           需要高亮显示的节点标识
         */
        function highlightAndExpand_ztree(treeId, highlightNodes, tx, flag) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            //<1>. 先把全部节点更新为普通样式
            var treeNodes = treeObj.transformToArray(treeObj.getNodes());
            for(var i = 0; i < treeNodes.length; i++) {
                treeNodes[i].highlight = false;
                treeObj.updateNode(treeNodes[i]);
            }
            //<2>.收起树, 只展开根节点下的一级节点
            close_ztree(treeId);
            //<3>.把指定节点的样式更新为高亮显示，并展开
            if(highlightNodes != null) {
                for(var i = 0; i < highlightNodes.length; i++) {
                    if(flag != null && flag != "") {
                        if(highlightNodes[i].flag == flag) {
                            //高亮显示节点，并展开
                            highlightNodes[i].highlight = true;
                            treeObj.updateNode(highlightNodes[i]);
                            //高亮显示节点的父节点的父节点....直到根节点，并展示
                            var parentNode = highlightNodes[i].getParentNode();
                            var parentNodes = getParentNodes_ztree(treeId, parentNode);
                            treeObj.expandNode(parentNodes, true, false, true);
                            treeObj.expandNode(parentNode, true, false, true);
                        }
                    } else {
                        //高亮显示节点，并展开
                        //highlightNodes[i].checked = true;
                        var t = highlightNodes[i].name;
                        t = t.replace(eval("/" + tx + "/gi"), "<span style='background-color: yellow;color:red'>" + tx + "</span>");
                        highlightNodes[i].name = t;
                        treeObj.updateNode(highlightNodes[i]);
                        //高亮显示节点的父节点的父节点....直到根节点，并展示
                        var parentNode = highlightNodes[i].getParentNode();
                        var parentNodes = getParentNodes_ztree(treeId, parentNode);
                        treeObj.expandNode(parentNodes, true, false, true);
                        treeObj.expandNode(parentNode, true, false, true);
                    }
                }
            }
        }

        /**
         * 递归得到指定节点的父节点的父节点....直到根节点
         */
        function getParentNodes_ztree(treeId, node) {
            if(node != null) {
                var treeObj = $.fn.zTree.getZTreeObj(treeId);
                var parentNode = node.getParentNode();
                return getParentNodes_ztree(treeId, parentNode);
            } else {
                return node;
            }
        }

        /**
         * 设置树节点字体样式
         */
        function setFontCss_ztree(treeId, treeNode) {
            if(treeNode.id == 0) {
                //根节点
                return {
                    color: "#333",
                    "font-weight": "bold"
                };
            } else if(treeNode.isParent == false) {
                //叶子节点
                return(!!treeNode.highlight) ? {
                    color: "#ff0000",
                    "font-weight": "bold"
                } : {
                    color: "#660099",
                    "font-weight": "normal"
                };
            } else {
                //父节点
                return(!!treeNode.highlight) ? {
                    color: "#ff0000",
                    "font-weight": "bold"
                } : {
                    color: "#333",
                    "font-weight": "normal"
                };
            }
        }
        //-->
    </SCRIPT>
</head>

<body>
<div style="clear: both;"><input type="text" id="ser" value="check"/><input type="button" value="查找" onclick="search_ztree('tree', 'ser')"/></div>
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</body>

</html>
